<template>
    <div class="box-view screen-all flex">
        <ul>
            <li v-for="(item, index) in data.list" :key="`c-${index}`" :class="`text-${item.class}`">
                {{ `hello ${item.tip}` }}
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import { ref, Ref, reactive, toRefs, onMounted, defineComponent } from 'vue';

export default defineComponent({
    components: {
        
    },

    setup () {
        
        const token = ref(7777);
        const name = ref("临沂");
        const type = ref(7);

        const data = reactive({
            list: [
                { class: 'red', tip: '!' },
                { class: 'orange', tip: '、' },
                { class: 'green', tip: '。' },
            ],
        })

        onMounted(() => {
            let url;

            url = 'http://www.xxx.com/?' + 'token=' + token.value + '&name=' + name.value + '&type=' + type;
            url = `http://www.xxx.com/?token=${token.value}&name=${name.value}&type=${name.value}`;

        })

        return {
            data,
        }
    },
});
</script>
<style lang="scss" scoped>
    .box-view {
        background-color: white;
        font-size: 20px;
        color: #121212;
    }

    .text-red {
        color: red;
    }
    .text-orange {
        color: orange;
    }
    .text-green {
        color: green;
    }
</style>
